<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 500px;
            height: 500px;
            background: skyblue;
        }
        .box a{
            text-decoration: none;
            color: #000;
        }
    </style>
    <script src="js/js.cookie.js"></script>
</head>
<body>
    <div class="box">
        <h1>登录</h1>
        <p>用户名:<input type="text" placeholder="请输入用户名" id="uname"><span></span></p>
        <p>密&nbsp&nbsp&nbsp码:<input type="password" placeholder="请输入密码" id="upwd"><span></span></p>
        <button>登录</button>
        <button><a href="regist.html">注册</a></button>
    </div>
    <script>
        var oBtns=document.querySelectorAll("button");
        var oUname=document.querySelector("#uname");
        var oPwd=document.querySelector("#upwd");
        // 给登录按钮绑定点击事件
        oBtns[0].onclick=function(){
            // 获取本地数据
            var oUserList=JSON.parse(localStorage.getItem("users"||'[]'));
            var oUser={
                name:oUname.value,
                pwd:oPwd.value
            }
            // 比较
            var isFlag=false;
            for (var i = 0; i < oUserList.length; i++) {
                if(oUserList[i].name==oUser.name&&oUserList[i].pwd==oUser.pwd){
                    isFlag=true;
                    break;
                }
            }
            if (isFlag) {
                sessionStorage.setItem("token",JSON.stringify(oUser));
                alert("登录成功!");
                location.href="content.html";
            }else{
                alert("用户名或密码错误!");
            }
            return false;
        }
    </script>
</body>
</html>